import React from "react";
import "./style.css";
const data = new Array(7).fill().map((v, i) => {
  const day = i + 1;
  return {
    title: `第${day}天`,
    count: day > 4 ? 50 * 4 + (day - 4) * 100 : 50 * day,
    state: false,
  };
});

console.log(data)

class Sign extends React.Component {
  state = {
    priceCount: 1000,
    data: data,
  };
  handleClick(v) {
    // 计算价钱
    // v.state  true  -
    // v.state  false  +
    const priceCount = this.state.priceCount + (v.state ? -v.count : +v.count);
 

    const data = [...this.state.data];
    const item = data.find((item) => item.title === v.title);
    item.state = !item.state;
    // 切换高亮
    this.setState({
      priceCount: priceCount,
      data: data,
    });
  }

  render() {
    const { priceCount, data } = this.state;
    return (
      <div>
        <h2>我的金币： {priceCount}</h2>

        <ul>
          {data.map((v, i) => {
            return (
              <li
                key={i}
                className={v.state ? "active" : ""}
                onClick={() => this.handleClick(v)}
              >
                <div>{v.count}</div>
                <div>{v.title}</div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Sign;
